import React from 'react';
import { Link } from 'react-router-dom';
import './Home.css';

const Home = () => {
  return (
    <div className="home">
      {/* Hero Section */}
      <section className="hero">
        <div className="hero-content">
          <div className="hero-text">
            <h1 className="hero-title">
              <span className="gradient-text">HelloAlgo</span>
              <span className="ai-badge">🤖 AI驱动</span>
            </h1>
            <p className="hero-subtitle">
              <strong>一个AI辅助的算法可视化学习平台</strong>
            </p>
            <p className="hero-description">
              结合先进的AI技术与生动的可视化动画，为你提供个性化的算法学习体验。
              智能答疑、自适应学习路径、实时代码分析 - 让AI成为你的专属算法导师。
            </p>
            <div className="ai-features-highlight">
              <div className="ai-feature">
                <span className="ai-icon">🧠</span>
                <span>智能问答助手</span>
              </div>
              <div className="ai-feature">
                <span className="ai-icon">📈</span>
                <span>个性化学习路径</span>
              </div>
              <div className="ai-feature">
                <span className="ai-icon">🔍</span>
                <span>实时代码分析</span>
              </div>
            </div>
            <div className="hero-buttons">
              <Link to="/algorithms" className="btn btn-primary">
                开始探索
              </Link>
              <Link to="/playground/bubble-sort" className="btn btn-secondary">
                快速体验
              </Link>
            </div>
          </div>
          <div className="hero-animation">
            <div className="floating-elements">
              <div className="element element-1">🔢</div>
              <div className="element element-2">📊</div>
              <div className="element element-3">🌳</div>
              <div className="element element-4">🔗</div>
              <div className="element element-5">⚡</div>
              <div className="element element-6">🎯</div>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="features">
        <div className="container">
          <h2 className="section-title">AI赋能的学习体验</h2>
          <div className="features-grid">
            <div className="feature-card ai-highlight">
              <div className="feature-icon">🤖</div>
              <h3>AI智能助手</h3>
              <p>24/7在线的AI导师，随时解答算法疑问，提供个性化学习建议</p>
            </div>
            <div className="feature-card ai-highlight">
              <div className="feature-icon">🧠</div>
              <h3>智能学习路径</h3>
              <p>AI分析你的学习进度，自动推荐最适合的下一个学习内容</p>
            </div>
            <div className="feature-card ai-highlight">
              <div className="feature-icon">🎯</div>
              <h3>代码智能分析</h3>
              <p>AI实时分析你的代码，提供优化建议和错误修正</p>
            </div>
            <div className="feature-card">
              <div className="feature-icon">🎨</div>
              <h3>直观可视化</h3>
              <p>通过精美的动画效果，让抽象的算法概念变得具体可见</p>
            </div>
            <div className="feature-card">
              <div className="feature-icon">🎮</div>
              <h3>交互式学习</h3>
              <p>支持单步执行、暂停、调速等功能，完全掌控学习节奏</p>
            </div>
            
            <div className="feature-card">
              <div className="feature-icon">🚀</div>
              <h3>新手友好</h3>
              <p>从零开始，循序渐进，适合所有水平的学习者</p>
            </div>
          </div>
        </div>
      </section>

      {/* Algorithm Categories Preview */}
      <section className="categories-preview">
        <div className="container">
          <h2 className="section-title">算法分类</h2>
          <div className="categories-grid">
            <div className="category-card">
              <div className="category-icon">📊</div>
              <h3>排序算法</h3>
              <p>冒泡排序、选择排序、插入排序、快速排序、归并排序</p>
              <div className="category-count">5 个算法</div>
            </div>
            <div className="category-card">
              <div className="category-icon">🔗</div>
              <h3>链表操作</h3>
              <p>链表基础操作、链表反转等经典问题</p>
              <div className="category-count">2 个算法</div>
            </div>
            <div className="category-card">
              <div className="category-icon">🌳</div>
              <h3>二叉树</h3>
              <p>二叉树基础、搜索二叉树、深度优先搜索、广度优先搜索</p>
              <div className="category-count">4 个算法</div>
            </div>
            <div className="category-card">
              <div className="category-icon">📚</div>
              <h3>栈操作</h3>
              <p>栈的基本操作和应用场景</p>
              <div className="category-count">即将推出</div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Home;
